<template>
  <el-dialog :title="'添加测评部门'" :close-on-click-modal="false" :visible.sync="visible" @close="clearDataList()" width="90vw" top="5vh">
    <el-container>
      <el-main style="height:70vh;overflow-x: hidden;">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="5">
            <div class="boxsty">
              <el-tree :data="treeData" :props="defaultProps" :filter-node-method="filterNode" class="filter-tree" node-key="id" highlight-current :default-expanded-keys="[1]" accordion @node-click="getNodeData" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="19">
            <div class="boxsty">
              <div class="tabletext titbottom">已选择部门</div>

              <el-table :data="gzpzDataList" stripe>
                <el-table-column prop="deptName" label="测评部门" min-width="350">
                </el-table-column>
                <el-table-column prop="cpPs" label="评票票数" min-width="350">
                  <template slot-scope="scope">
                    <el-input-number  v-model="scope.row.cpPs" @change="elChange(scope.row,scope.$index)"></el-input-number>
                    <span style="color: red">{{ scope.row.cpExplain }}</span>
                  </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button @click="removeDept(scope.$index,scope.row.id)" type="danger" plain>删除</el-button>

                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      
      <el-button type="primary"  v-if="canSubmit" @click="addBathDept">确定</el-button>
      <el-button type="primary" plain @click="btnCancel">取消</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { addListObj } from '@/api/ceping/cepingcpgzbcpmxb'
import { fetchTree } from '@/api/admin/dept'
import { getPzByGzIdAndMxId, addObj, delObj } from '@/api/ceping/cepingcpgzcpmxcppzb'

export default {
  data() {
    return {
      visible: false,
      canSubmit:false,
      tableDataDept: [],
      dataForm: {},
      listQuery: {
        name: undefined
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      gzpzDataList: [],
      gzId: '',
      mxId: '',
      tempList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    elChange(value,index){
      if(value.cpPs > 500 || value.cpPs < 1){
        this.$set(this.gzpzDataList[index],"cpExplain","范围在1-500");
      }
      else
      {
        this.$set(this.gzpzDataList[index],"cpExplain","");
      }
    },
    init(gzId, mxId) {
      this.visible = true;
      this.canSubmit=true;
      this.gzId = gzId;
      this.mxId = mxId;
      //查询配置规则
      getPzByGzIdAndMxId(this.gzId, this.mxId).then(response => {
        this.gzpzDataList = response.data.data;
      }).catch(() => {
        this.$notify.closeAll();
        this.$notify.error("数据错误");
      });
    },
    getList() {
      fetchTree(this.listQuery).then(response => {
       //console.log(response.data);

        this.treeData = response.data.data
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getNodeData(obj) {
      for (var i = 0; i < this.gzpzDataList.length; i++) {
        if (this.gzpzDataList[i].deptId == obj.id) {
          return
        }
      }
      this.gzpzDataList.push({
        gzId: this.gzId,
        cpId: this.mxId,
        deptId: obj.id,
        deptName: obj.name,
        cpPs: 1,
        cpExplain: ''
      })
      this.tempList.push({
        gzId: this.gzId,
        cpId: this.mxId,
        deptId: obj.id,
        deptName: obj.name,
        cpPs: 1,
        cpExplain: ''
      })
    },
    //清空
    clearDataList() {
      this.tempList = [];
      this.gzpzDataList = [];
    },
    //校验
    dataError(){
      let lResult = false;
      for(let i = 0; i < this.gzpzDataList.length; i++){
        if(this.gzpzDataList[i].cpExplain !== ""){
          lResult = true;
          break;
        }
      }
      return lResult;
    },
    addBathDept() {
      const isErr = this.dataError();
      if(isErr){ return; }

      this.canSubmit=false;
      addObj(this.gzpzDataList).then(response => {
        this.canSubmit=true;
        if (response.data.code=="0") {
          this.$notify.closeAll();
          this.$notify.success('保存成功');
          this.tempList = [];
          this.visible = false
          this.$emit('refPzGzmx')
        } else {
          this.$notify.closeAll();
          this.$notify.error("数据错误");
          this.tempList = [];
        }
      }).catch(() => {
        this.$notify.closeAll();
        this.$notify.error("数据错误");
        this.tempList = [];
        this.canSubmit=true;
      });
    },
    removeDept(index, id) {
      if (id) {
        delObj(id).then(response => {
          if (response.data.code=="0") {
            this.gzpzDataList.splice(index, 1)
          }
        }).catch(() => {
          this.$notify.closeAll();
          this.$notify.error("数据错误");
        });
      } else {
        this.gzpzDataList.splice(index, 1)
      }
    },
    //取消按钮
    btnCancel(){
      this.visible = false;
      this.clearDataList();
    }
  }
}
</script>

<style scoped>
</style>
